هل من الممكن تبديل رؤية عنصر باستخدام الوظائف. إخفاء () أو. شو () أو .تبديل ()؟ كيف تختبر ما إذا كان العنصر مرئيًا أم مخفيًا؟
1
2
التالى
نظرًا لأن السؤال يشير إلى عنصر واحد ، فقد يكون هذا الرمز أكثر ملاءمة:
// التحقق من محتوى CSS للعرض: [بلا | كتلة] ، يتجاهل الرؤية: [صواب | خطأ]
$ (element) .is (": مرئي")؛
// نفس العمل مع المخفي
$ (element) .is (": hidden")؛
إنه مماثل لاقتراح twernt ، لكنه ينطبق على عنصر واحد ؛ وهو يطابق الخوارزمية الموصى بها في الأسئلة الشائعة لـ jQuery.
نستخدم jQuery's is () للتحقق من العنصر المحدد بعنصر آخر أو محدد أو أي كائن jQuery. تنتقل هذه الطريقة على طول عناصر DOM للعثور على تطابق يلبي المعلمة التي تم تمريرها. سيعود صحيحًا إذا كان هناك تطابق ، وإلا فسيتم إرجاع خطأ.
|
يمكنك استخدام المحدد المخفي:
// يطابق جميع العناصر المخفية
$ ('element: hidden')
والمحدد المرئي:
// يطابق كل العناصر المرئية
$ ('element: مرئي')
|
إذا ($ (element) .css ('display') == 'none' || $ (element) .css ("visibility") == "hidden") {
// "عنصر" مخفي
}
الطريقة المذكورة أعلاه لا تأخذ في الاعتبار رؤية الوالد. للنظر في الوالد أيضًا ، يجب عليك استخدام .is (": hidden") أو .is (": مرئي").
فمثلا،
ستعتبر الطريقة أعلاه أن div2 مرئي بينما: مرئي لا. لكن ما سبق قد يكون مفيدًا في كثير من الحالات ، خاصة عندما تحتاج إلى معرفة ما إذا كان هناك أي خطأ divs مرئي في الوالد المخفي لأنه في مثل هذه الظروف: لن يعمل المرئي
|
لا تتناول أي من هذه الإجابات ما أفهمه على أنه السؤال ، وهو ما كنت أبحث عنه ، "كيف يمكنني التعامل مع العناصر التي يمكن رؤيتها: مخفية؟". لا: مرئي ولا: مخفي سيتعاملان مع هذا ، حيث يبحث كلاهما عن العرض وفقًا للوثائق. بقدر ما أستطيع تحديده ، لا يوجد محدد للتعامل مع رؤية CSS. إليك كيفية حلها (محددات jQuery القياسية ، قد يكون هناك بناء جملة أكثر كثافة):
$ (". item"). كل (وظيفة () {
إذا ($ (this) .css ("visibility") == "hidden") {
// معالجة الحالة غير المرئية
} آخر {
// معالجة الحالة المرئية
}
}) ؛
|
من كيف يمكنني تحديد حالة عنصر التبديل؟
يمكنك تحديد ما إذا كان العنصر مطويًا أم لا باستخدام المحددات المرئية و: المخفية.
var isVisible = $ ('# myDiv'). is (': مرئي') ؛
var isHidden = $ ('# myDiv'). is (': hidden') ؛
إذا كنت تعمل ببساطة على عنصر ما بناءً على رؤيته ، فيمكنك فقط تضمين: مرئي أو: مخفي في تعبير المحدد. فمثلا:
$ ('# myDiv: مرئي'). animate ({left: '+ = 200px'}، 'slow')؛
|
غالبًا عند التحقق مما إذا كان هناك شيء ما مرئيًا أم لا ، ستمضي قدمًا على الفور وتفعل شيئًا آخر به. تسلسل jQuery يجعل هذا الأمر سهلاً.
لذلك إذا كان لديك محدد وتريد تنفيذ بعض الإجراءات عليه فقط إذا كان مرئيًا أو مخفيًا ، فيمكنك استخدام عامل التصفية (": مرئي") أو عامل التصفية (": مخفي") متبوعًا بربطه بالإجراء الذي تريده يأخذ.
لذا بدلاً من عبارة if ، مثل هذا:
إذا ($ ('# btnUpdate'). هو (": مرئي"))
{
$ ('# btnUpdate'). animate ({width: "toggle"})؛ // زر اخفاء
}
أو أكثر كفاءة ، ولكن حتى أقبح:
var button = $ ('# btnUpdate') ؛
إذا (button.is (": مرئي"))
{
button.animate ({width: "toggle"})؛ // زر اخفاء
}
يمكنك القيام بكل ذلك في سطر واحد:
$ ('# btnUpdate'). filter (": visual"). animate ({width: "toggle"})؛
|
المحدد المرئي وفقًا لوثائق jQuery:
لديهم قيمة عرض CSS لا شيء.
إنها عناصر نموذج من النوع = "مخفي".
يتم تعيين العرض والارتفاع بشكل صريح على 0.
يتم إخفاء عنصر السلف ، لذلك لا يظهر العنصر في الصفحة.
العناصر التي يمكن رؤيتها: مخفية أو عتامة: 0 تعتبر مرئية ، لأنها لا تزال تستهلك مساحة في التخطيط.
يكون هذا مفيدًا في بعض الحالات وغير مفيد في حالات أخرى ، لأنه إذا كنت تريد التحقق مما إذا كان العنصر مرئيًا (عرض! = لا شيء) ، تجاهل رؤية الوالدين ، ستجد أن القيام بذلك .css ("display") == 'none 'ليس أسرع فحسب ، بل سيعيد أيضًا فحص الرؤية بشكل صحيح.
إذا كنت تريد التحقق من الرؤية بدلاً من العرض ، فيجب عليك استخدام: .css ("visibility") == "hidden".
ضع في اعتبارك أيضًا ملاحظات jQuery الإضافية:
نظرًا لأن: visual هو امتداد jQuery وليس جزءًا من مواصفات CSS ، فإن الاستعلامات التي تستخدم: مرئية لا يمكنها الاستفادة من تعزيز الأداء الذي توفره طريقة DOM querySelectorAll () الأصلية. لتحقيق أفضل أداء عند استخدام: مرئي لتحديد العناصر ، حدد أولاً العناصر باستخدام محدد CSS خالص ، ثم استخدم .filter (": visual").
أيضًا ، إذا كنت قلقًا بشأن الأداء ، يجب أن تتحقق الآن أنت تراني ... إظهار / إخفاء الأداء (2010-05-04). واستخدم طرق أخرى لإظهار وإخفاء العناصر.
|
هذا يناسبني ، وأنا أستخدم show () و hide () لجعل div مخفيًا / مرئيًا:
إذا ($ (this) .css ('display') == 'none') {
/ * رمزك هنا * /
} آخر {
/ * منطق بديل * /
}
|
كيف تعمل رؤية العنصر و jQuery ؛
يمكن إخفاء عنصر مع العرض: لا شيء ،الرؤية: مخفية أو عتامة: 0. الفرق بين تلك الطرق:
عرض: لا شيء يخفي العنصر ، ولا يشغل أي مساحة ؛
الرؤية: مخفي يخفي العنصر ، لكنه لا يزال يشغل مساحة في التخطيط ؛
العتامة: 0 يخفي العنصر كـ "visibility: hidden" ، ولا يزال يشغل مساحة في التخطيط ؛ الاختلاف الوحيد هو أن العتامة تتيح للمرء أن يجعل العنصر شفافًا جزئيًا ؛
إذا كان ($ ('. target'). is (': hidden')) {
$ ('. target'). show ()؛
} آخر {
$ ('. target'). إخفاء ()؛
}
إذا كان ($ ('. target'). is (': visual')) {
$ ('. target'). إخفاء ()؛
} آخر {
$ ('. target'). show ()؛
}
إذا ($ ('. target-visibility'). css ('visibility') == 'hidden') {
$ ('. target-visibility'). css ({
الرؤية: "مرئية" ،
عرض: ""
}) ؛
} آخر {
$ ('. target-visibility'). css ({
الرؤية: "مخفي" ،
عرض: ""
}) ؛
}
إذا ($ ('. target-visibility'). css ('opacity') == "0") {
$ ('. target-visibility'). css ({
العتامة: "1" ،
عرض: ""
}) ؛
} آخر {
$ ('. target-visibility'). css ({
العتامة: "0" ،
عرض: ""
}) ؛
}
طرق تبديل jQuery المفيدة:
$ (". click"). click (function () {
$ ('. target'). toggle ()؛
}) ؛
$ (". click"). click (function () {
$ ('. target'). slideToggle ()؛
}) ؛
$ (". click"). click (function () {
$ ('. target'). fadeToggle ()؛
}) ؛
|
يمكنك أيضًا القيام بذلك باستخدام JavaScript عادي:
الوظيفة هي تقديم (domObj) {
إذا ((domObj.nodeType! = 1) || (domObj == document.body)) {
العودة صحيح
}
إذا (domObj.currentStyle && domObj.currentStyle ["display"]! = "none" && domObj.currentStyle ["visibility"]! = "hidden") {
إرجاع isRendered (domObj.parentNode) ،
} else if (window.getComputedStyle) {
var cs = document.defaultView.getComputedStyle (domObj، null) ؛
if (cs.getPropertyValue ("display")! = "none" && cs.getPropertyValue ("visibility")! = "hidden") {
إرجاع isRendered (domObj.parentNode) ؛
}
}
عودة كاذبة؛
}
ملاحظات:
يعمل في كل مكان
يعمل مع العناصر المتداخلة
يعمل مع الأنماط المضمنة و CSS
لا يتطلب إطار عمل
|
سأستخدم فئة CSS. إخفاء {display: none! important؛ }.
للإخفاء / العرض ، أستدعى .addClass ("إخفاء") /. removeClass ("إخفاء"). للتحقق من الرؤية ، أستخدم .hasClass ("إخفاء").
إنها طريقة بسيطة وواضحة للتحقق / إخفاء / إظهار العناصر ، إذا كنت لا تخطط لاستخدام طرق .toggle () أو .animate ().
|
رابط تجريبي
$ ('# clickme'). انقر فوق (function () {
$ ('# book'). toggle ('slow'، function () {
// اكتملت الرسوم المتحركة.
تنبيه ($ ('# كتاب'). is (": visual"))؛ // <--- TRUE إذا كانت مرئية خطأ إذا كانت مخفية
}) ؛
}) ؛
انقر هنا
مصدر:
Blogger Plug n Play - أدوات وأدوات jQuery: كيفية معرفة ما إذا كان العنصر مخفيًا أو مرئيًا باستخدام jQuery
|
يمكن للمرء ببساطة استخدام السمة المخفية أو المرئية ، مثل:
$ ('element: hidden')
$ ('element: مرئي')
أو يمكنك تبسيط الأمر على النحو التالي.
$ (element) .is (": مرئي")
|
يجب تعيين ebdiv على style = "display: none؛". يعمل لكل من إظهار وإخفاء:
$ (document) .ready (function () {
$ ("# eb"). انقر (الوظيفة () {
$ ("# ebdiv"). toggle ()؛
}) ؛
}) ؛
|
هناك إجابة أخرى يجب وضعها في الاعتبار وهي إذا كنت تخفي عنصرًا ، فيجب عليك استخدام jQuery ، ولكن بدلاً من إخفائه فعليًا ، يمكنك إزالة العنصر بالكامل ، لكنك تنسخ محتوى HTML والعلامة نفسها في متغير jQuery ، ثم كل ما عليك فعله هو اختبار ما إذا كانت هناك مثل هذه العلامة على الشاشة ، باستخدام القيمة العادية if (! $ ('# thetagname'). length).
|
عند اختبار عنصر مقابل: المحدد المخفي في jQuery ، يجب اعتبار أن العنصر المطلق الموضع يمكن التعرف عليه على أنه مخفي بالرغم من أن عناصره الفرعية مرئية.
يبدو هذا غير بديهي إلى حد ما في المقام الأول - على الرغم من أن إلقاء نظرة فاحصة على وثائق jQuery يعطي المعلومات ذات الصلة:
يمكن اعتبار العناصر مخفية لعدة أسباب: [...] يتم تعيين عرضها وارتفاعها صراحة على 0. [...]
لذلك هذا منطقي بالفعل فيما يتعلق بنموذج الصندوق والنمط المحسوب للعنصر. حتى إذا لم يتم تعيين العرض والارتفاع صراحةً على 0 ، فقد يتم تعيينهما ضمنيًا.
ألق نظرة على المثال التالي:
console.log ($ ('. foo'). is (': hidden'))؛ // صحيح
console.log ($ ('. bar'). is (': hidden'))؛ // خاطئة
.foo {
الموقف: مطلق ؛
اليسار: 10 بكسل ؛
أعلى: 10 بكسل ؛
الخلفية: # ff0000 ؛
}
.شريط {
الموقف: مطلق ؛
اليسار: 10 بكسل ؛
أعلى: 10 بكسل ؛
العرض: 20 بكسل ؛
الارتفاع: 20 بكسل ؛
الخلفية: # 0000ff ؛
}
تحديث لـ jQuery 3.x:
مع jQuery 3 ، سيتغير السلوك الموصوف! سيتم اعتبار العناصر مرئية إذا كان لديها أي مربعات تخطيط ، بما في ذلك تلك التي لا تحتوي على عرض و / أو ارتفاع.
JSFiddle مع jQuery 3.0.0-alpha1:
http://jsfiddle.net/pM2q3/7/
عندئذٍ ، ستحصل شفرة JavaScript نفسها على هذا الناتج:
console.log ($ ('. foo'). is (': hidden'))؛ // خاطئة
console.log ($ ('. bar'). is (': hidden'))؛// خاطئة
|
قد يعمل هذا:
توقع ($ ("# message_div"). css ("display")). toBe ("لا شيء")؛
|
مثال:
$ (document) .ready (function () {
إذا ($ ("# checkme: hidden"). length) {
console.log ("مخفي") ؛
}
}) ؛
|
للتحقق مما إذا كان غير مرئي أستخدم!:
إذا (! $ ('# book'). is (': visual')) {
تنبيه ("# كتاب غير مرئي")
}
أو ما يلي هو أيضًا sam ، حيث يحفظ محدد jQuery في متغير للحصول على أداء أفضل عندما تحتاج إليه عدة مرات:
var $ book = $ ('# كتاب')
إذا (! $ book.is (': visual')) {
تنبيه ("# كتاب غير مرئي")
}
|
استخدم تبديل الفصل وليس تعديل النمط. . .
يعد استخدام الفئات المخصصة لإخفاء العناصر أمرًا سهلاً وهو أيضًا أحد أكثر الطرق فعالية. سيؤدي تبديل فئة "مخفية" بنمط عرض "بلا" إلى أداء أسرع من تحرير هذا النمط مباشرةً. لقد أوضحت بعضًا من هذا تمامًا في سؤال Stack Overflow ، حيث تم تحويل عنصرين مرئيين / مخفيين في نفس div.
أفضل ممارسات جافا سكريبت وتحسينها
في ما يلي مقطع فيديو مفيد حقًا لبرنامج Google Tech Talk بواسطة مهندس الواجهة الأمامية لشركة Google نيكولاس زاكاس:
تسريع جافا سكريبت الخاص بك (يوتيوب)
|
تم تنشيط مثال على استخدام الاختيار المرئي لـ adblocker:
$ (document) .ready (function () {
إذا (! $ ("# ablockercheck"). is (": مرئي"))
$ ("# ablockermsg"). text ("الرجاء تعطيل مانع الإعلانات."). show ()؛
}) ؛
"ablockercheck" هو معرف يمنع adblocker. لذا ، تحقق مما إذا كان مرئيًا ، يمكنك اكتشاف ما إذا كان adblocker قيد التشغيل.
|
بعد كل شيء ، لا يناسبني أي من الأمثلة ، لذلك كتبت بنفسي.
الاختبارات (لا يوجد دعم لعامل تصفية Internet Explorer: ألفا):
أ) تحقق مما إذا كان المستند غير مخفي
ب) تحقق مما إذا كان العنصر لا يحتوي على عرض / ارتفاع / عتامة أو عرض: لا شيء / الرؤية: مخفي في الأنماط المضمنة
ج) تحقق مما إذا كان المركز (أيضًا لأنه أسرع من اختبار كل بكسل / زاوية) للعنصر غير مخفي بواسطة عنصر آخر (وجميع الأسلاف ، على سبيل المثال: overflow: hidden / scroll / عنصر فوق آخر) أو حواف الشاشة
د) تحقق مما إذا كان العنصر لا يحتوي على عرض / ارتفاع / عتامة أو عرض: لا شيء / الرؤية: مخفي في الأنماط المحسوبة (بين جميع الأسلاف)
اختبارها على
Android 4.4 (متصفح أصلي / Chrome / Firefox) ، Firefox (Windows / Mac) ، Chrome (Windows / Mac) ، Opera (Windows Presto / Mac WebKit) ، Internet Explorer (أوضاع مستند Internet Explorer 5-11 + Internet Explorer 8 على الجهاز الظاهري) ، و Safari (Windows / Mac / iOS).
var is_visible = (function () {
var x = window.pageXOffset؟ window.pageXOffset + window.innerWidth - 1: 0 ،
y = window.pageYOffset؟ window.pageYOffset + window.innerHeight - 1: 0 ،
نسبي = !! ((! x &&! y) ||! document.elementFromPoint (x، y))؛
تعمل داخل (طفل ، والد) {
بينما (طفل) {
إذا (الطفل === الوالد) يعود صحيحًا ؛
child = child.parentNode ؛
}
عودة كاذبة؛
} ؛
وظيفة الإرجاع (العنصر) {
إذا (
المستند المخفي ||
elem.offsetWidth == 0 ||
elem.offsetHeight == 0 ||
elem.style.visibility == 'مخفي' ||
elem.style.display == 'لا شيء' ||
elem.style.opacity === 0
) عودة كاذبة؛
var rect = elem.getBoundingClientRect () ،
إذا (نسبي) {
if (! inside (document.elementFromPoint (rect.left + elem.offsetWidth / 2، rect.top + elem.offsetHeight / 2)، elem)) إرجاع خطأ ؛
} وإلا إذا (
! inside (document.elementFromPoint (rect.left + elem.offsetWidth / 2 + window.pageXOffset، rect.top + elem.offsetHeight / 2 + window.pageYOffset)، elem) ||
(
rect.top + elem.offsetHeight / 2 <0 ||
rect.left + elem.offsetWidth / 2 <0 ||
rect.bottom - elem.offsetHeight / 2> (window.innerHeight || document.documentElement.clientHeight) ||
rect.right - elem.offsetWidth / 2> (window.innerWidth || document.documentElement.clientWidth)
)
) عودة كاذبة؛
إذا (window.getComputedStyle || elem.currentStyle) {
var el = elem ،
شركات = لاغية ؛
بينما (el) {
if (el === document) {break؛} وإلا إذا (! el.parentNode) إرجاع خطأ؛
شركات = window.getComputedStyle؟ window.getComputedStyle (el، null): el.currentStyle؛
إذا (comp && (comp.visibility == 'hidden' || comp.display == 'none' || (typeof comp.opacity! == 'undefined' && comp.opacity! = 1))) إرجاع خطأ ؛
el = عقدة الوالد ؛
}
}
العودة صحيح
}
}) () ؛
كيف تستعمل:
is_visible (elem) // منطقي
|
تحتاج إلى التحقق من كل من ... العرض وكذلك الرؤية:
إذا ($ (this) .css ("display") == "none" || $ (this) .css ("visibility") == "hidden") {
// العنصر غير مرئي
} آخر {
// العنصر مرئي
}
إذا تحققنا من $ (this) .is (": visual") ، يتحقق jQuery من كلا الأمرين تلقائيًا.
|
ربما يمكنك فعل شيء مثل هذا
$ (document) .ready (function () {
فار مرئية =$ ('# tElement'). is (': visual')؛
إذا (مرئي) {
تنبيه ("مرئي") ؛
// الشفرة
}
آخر
{
تنبيه ("مخفي") ؛
}
}) ؛
الاسم الأول
|
ما عليك سوى التحقق من الرؤية عن طريق التحقق من القيمة المنطقية ، مثل:
إذا (this.hidden === false) {
// كودك
}
لقد استخدمت هذا الرمز لكل وظيفة. وإلا يمكنك استخدام (': مرئي') للتحقق من رؤية عنصر.
|
نظرًا لأن العناصر ذات الرؤية: مخفية أو عتامة: تعتبر 0 مرئية ، نظرًا لأنها لا تزال تستهلك مساحة في التخطيط (كما هو موضح في jQuery: المرئي المحدد) - يمكننا التحقق مما إذا كان العنصر مرئيًا بالفعل بهذه الطريقة:
الوظيفة هي العنصر ReallyHidden (el) {
إرجاع $ (el) .is (": hidden") || $ (el) .css ("visibility") == "hidden" || $ (el) .css ("العتامة") == 0 ؛
}
var booElementReallyShowed =! isElementReallyHidden (someEl) ،
$ (someEl) .parents (). each (function () {
إذا (isElementReallyHidden (this)) {
booElementReallyShowed = خطأ ؛
}
}) ؛
|
ولكن ماذا لو كان CSS الخاص بالعنصر مشابهًا لما يلي؟
.جزء{
الموقف: مطلق ؛ اليسار: -9999 ؛
}
لذلك يجب أيضًا مراعاة هذه الإجابة على سؤال Stack Overflow. كيفية التحقق مما إذا كان العنصر خارج الشاشة.
|
يمكن إنشاء وظيفة للتحقق من سمات الرؤية / العرض لقياس ما إذا كان العنصر معروضًا في واجهة المستخدم أم لا.
فحص الوظيفة UIElementVisible (element) {
return ((element.css ('display')! == 'none') && (element.css ('visibility)! ==' hidden ')) ؛
}
كمان العمل
|
إليك أيضًا تعبير شرطي ثلاثي للتحقق من حالة العنصر ثم تبديله:
$ ('someElement'). on ('click'، function () {$ ('elementToToggle'). is (': visual')؟ $ ('elementToToggle'). إخفاء ('بطيء'): $ ('elementToToggle '). show (' slow ') ؛}) ؛
|
إذا ($ ('# postcode_div'). is (': مرئي')) {
إذا ($ ('# postcode_text'). val () == '') {
$ ('# spanPost'). text ('\ u00a0') ؛
} آخر {
$ ('# spanPost'). text ($ ('# postcode_text'). val ())؛
}
|
1
2
التالى
سؤال نشط للغاية. اكسب 10 سمعة للإجابة على هذا السؤال. تساعد متطلبات السمعة في حماية هذا السؤال من البريد العشوائي ونشاط عدم الإجابة.
ليس الجواب الذي تبحث عنه؟ تصفح الأسئلة الأخرى الموسومة javascript jquery dom visibility أو اطرح سؤالك الخاص.